import { createBrowserRouter } from 'react-router-dom'
import App from '../App'
import Home from '../pages/home/Index'
import NotFound from '../components/NotFound'
import Demo2 from '../pages/demo/Demo2'
// 1. 安装 nprogress 依赖包
// 2. 导入 nprogress 的 JS 和 CSS
import np from 'nprogress' // 直接给包名，就能导入 nprogress 的 JS 脚本
import 'nprogress/nprogress.css' // 基于包路径的方式，导入 nprogress 的 CSS
// 3. 实现 loading 效果

const router = createBrowserRouter(
  [
    // 路由项
    {
      path: '/',
      element: <App />,
      children: [
        // 索引路由，默认展示 Home 组件
        { index: true, element: <Home /> },
        // 子路由
        {
          path: 'home',
          lazy: async () => {
            // 导入懒加载的组件
            const { default: Home } = await import('../pages/home/Index')
            return {
              element: <Home />
            }
          }
        },
        {
          path: 'order',
          lazy: async () => {
            // 导入懒加载的组件
            const { default: Order } = await import('../pages/order/Index')
            return {
              element: <Order />
            }
          }
        },
        {
          path: 'me',
          lazy: async () => {
            // 导入懒加载的组件
            const { default: Me } = await import('../pages/me/Index')
            return {
              element: <Me />
            }
          }
        }
      ]
    },
    // 车票列表页面
    {
      path: '/query', // 抽离到顶级之后，path 要以 / 开头
      lazy: async () => {
        // 导入懒加载的组件
        const { default: Query, loader } = await import('../pages/query/Index')
        return {
          element: <Query />,
          loader
        }
      }
    },
    // 聊天的路由
    {
      path: '/chat', // 抽离到顶级之后，path 要以 / 开头
      lazy: async () => {
        // 导入懒加载的组件
        const { default: Chat } = await import('../pages/chat/Index')
        return {
          element: <Chat />
        }
      }
    },
    // 登录
    {
      path: '/login',
      lazy: async () => {
        const { default: Login } = await import('../pages/login/Index')
        return {
          element: <Login />
        }
      }
    },
    // 注册
    {
      path: '/reg',
      lazy: async () => {
        const { default: Reg } = await import('../pages/reg/Index')
        return {
          element: <Reg />
        }
      }
    },
    // 新闻列表
    {
      path: '/newslist',
      lazy: async () => {
        const { default: NewsList } = await import('../pages/news/NewsList')
        return {
          element: <NewsList />
        }
      }
    },
    // 新闻列表
    {
      path: '/list/:id',
      lazy: async () => {
        const { default: NewsDetail } = await import('../pages/news/NewsDetail')
        return {
          element: <NewsDetail />
        }
      }
    },
    // 选择城市的路由
    {
      path: '/city',
      async lazy() {
        const { default: CityList, loader } = await import(
          '../pages/city/Index'
        )
        return {
          element: <CityList />,
          loader
        }
      }
    },
    // 车票详情
    {
      path: '/ticket/:id',
      async lazy() {
        const { default: Ticket, loader } = await import(
          '../pages/ticket/Index'
        )
        return {
          element: <Ticket />,
          loader
        }
      }
    },
    // 车票订单填写页面
    {
      path: '/ticket-order',
      async lazy() {
        const { default: TicketOrder } = await import(
          '../pages/ticket-order/Index'
        )
        return {
          element: <TicketOrder />
        }
      }
    },
    // 订单详情
    {
      path: '/get-order',
      async lazy() {
        const { default: GetOrder } = await import('../pages/get-order/Index')
        return {
          element: <GetOrder />
        }
      }
    },
    { path: '/demo', element: <Demo2 /> },
    // 兜底的错误页
    { path: '*', element: <NotFound /> }
  ],
  {
    future: {
      v7_relativeSplatPath: true
    }
  }
)

// 如何监听路由正在加载 和 加载结束
// subscribe 单词，订阅的意思
// router.subscribe(fn) 订阅了路由状态的变化 idle -> loading -> idle
// btn.addEventListener('click', () => {})
router.subscribe((state) => {
  // 形参中的 state.navigation.state 就是路由最新的状态
  // console.log(state.navigation.state)

  if (state.navigation.state === 'loading') {
    // 展示 NProgress 的进度条
    np.start()
  } else if (state.navigation.state === 'idle') {
    // 隐藏 NProgress 的进度条
    np.done()
  }
})

export default router
